<template>
	<div>
		<div>
			<Toolbar></Toolbar>
			<div style="display: flex;">
				<el-tabs type="border-card" style="width: 240px;min-width: 240px;">
					<el-tab-pane label="控件">
						<palette @addComponent="onAddComponentHandler"></palette>
					</el-tab-pane>
					<el-tab-pane label="数据">
						<DataSourceConfig ref="dataSourceConfig"></DataSourceConfig>
					</el-tab-pane>
				</el-tabs>

				<div class="form-designer-content" style="flex-grow: 1;">
					<DesignComponentFactory :componentModel="componentComputed" ref="componentDesignerContent">
					</DesignComponentFactory>
				</div>
				<div class="form-designer-tree-prop">
					<el-tabs type="border-card" style="width: 258px;height:85vh;">
						<el-tab-pane label="属性">
							<PropertyTable ref="propertyTable"></PropertyTable>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
		<PreviewDialog ref="previewDialog"></PreviewDialog>
		<ComponentTreeDialog ref="componentTreeDialog"></ComponentTreeDialog>
	</div>
</template>

<script>
	import Toolbar from './Toolbar.vue';
	import Palette from './Palette.vue';
	import PropertyTable from './property/PropertyTable.vue';
	import NewModelCommand from './command/NewModelCommand.js';
	import DesignComponentFactory from './designcomponents/DesignComponentFactory.vue';
	import PreviewDialog from '@/views/devpage/webide/page/formdesigner/PreviewDialog.vue';
	import ComponentTreeDialog from '@/views/devpage/webide/page/formdesigner/ComponentTreeDialog.vue';
	import modelFactory from './ModelFactory.js';
	import DataSourceConfig from './DataSourceConfig.vue';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "FormDesigner",
		components: {
			Toolbar,
			Palette,
			PropertyTable,
			DesignComponentFactory,
			PreviewDialog,
			DataSourceConfig,
			ComponentTreeDialog
		},
		data() {
			return {
				isMouseDown: false,
				currentRole: "",
				currentData: {},
				componentModel: {
					"type": "page",
					"id": "1",
					children: []
				},
				selectedDesignComponent: undefined,
				createContext: {
					"currentComponentId": 1
				},
				previewDialogVisible: false,
				previewComponentModel: {},
				previewPageCode: "",
				dataSourceArray: [],
			}
		},
		props:["paraMap"],
		provide() {
			return {
				children: []
			}
		},
		beforeMount() {
			this.$store.state.formDesigner = this;
		},
		mounted() {
			this.init();
		},beformUnmount(){
			this.$store.state.formDesigner=undefined;
		},
		methods: {
			onAddComponentHandler(type){
				this.currentRole=type;
				var componentModel = this.componentModel;
				if (this.selectedDesignComponent != null) {
					componentModel = this.selectedDesignComponent.componentModel;
				}
				if (componentModel.type == "tabcontrol") {
					if (this.currentRole != "tabpage") {
						var selectedChildModel = this.selectedDesignComponent.getSelectedChildModel();
						if (selectedChildModel != undefined) {
							componentModel = selectedChildModel;
						}
					}
				}
				
				this.createContext.currentComponentId++;
				if (componentModel.type == "tablecolumn") {
					this.createContext.noLabel = true;
				}
				var childComponentModel = modelFactory.createModel(this.createContext, this.currentRole);
				this.createContext.noLabel = false;
				var newModelCommand = new NewModelCommand();
				newModelCommand.setParentModel(componentModel);
				newModelCommand.setChildModel(childComponentModel);
				newModelCommand.execute();
			},
			setSelectedDesignComponent(selectedDesignComponent) {
				this.selectedDesignComponent = selectedDesignComponent;
			},
			getSelectedDesignComponent() {
				return this.selectedDesignComponent;
			},
			getPropertyTable() {
				return this.$refs.propertyTable;
			},
			setComponentModel(componentModel) {
				this.componentModel = componentModel;
			},
			findComponentById(id) {
				for (var i = 0; i < this.$refs.componentDesignerContent.children.length; i++) {
					if (this.$refs.componentDesignerContent.children[i].componentModel.id == id) {
						return this.$refs.componentDesignerContent.children[i];
					}
				}
			},
			getCreateContext() {
				return this.createContext;
			},
			init() {
				var that = this;
				restUtil.getAction(this,"devformdesigner/init?pageCode=" + this.paraMap["pageCode"]).then(
					function(response) {
						if (response.data.code == 1) {
							that.createContext.pageCode = response.data.pageCode;
							that.createContext.name = response.data.name;
							if (response.data.componentModelJson != null) {
								that.componentModel = JSON.parse(response.data.componentModelJson);
							} else {
								that.componentModel = modelFactory.createModel(that.createContext, "page");
							}
							if (response.data.currentComponentId != null) {
								that.createContext.currentComponentId = response.data.currentComponentId;
							}
							that.$refs.dataSourceConfig.setTableList(response.data.tableList);
							that.$refs.dataSourceConfig.datasourceList = that.componentModel["dataSourceList"];
							if (that.$refs.dataSourceConfig.datasourceList == undefined) {
								that.$refs.dataSourceConfig.datasourceList = [];
							}
							that.$refs.dataSourceConfig.resetDataSourceArray();
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			preview() {
				this.$refs.previewDialog.setVisible(true);
			},
			setDataSourceArray(dataSourceArray) {
				this.dataSourceArray = dataSourceArray;
			},
			getDataSourceArray() {
				return this.dataSourceArray;
			}
		},
		computed: {
			componentComputed() {
				return this.componentModel;
			}
		}
	}
</script>

<style>

</style>
